<template>
  <div class="h-full relative">
    <div ref="containerRef" class="h-full"></div>
    <div class="absolute top-12 right-10">
      <el-card>
        <template #header>
          <div class="text-center">设备在线状态</div>
        </template>
        <el-table :data="wsStore.statusList">
          <el-table-column label="设备名称" prop="dictLabel"></el-table-column>
          <el-table-column label="设备状态" prop="dictValue">
            <template #default="{row,column}">
              <el-tag v-if="row[column.property] === '2'" type="danger">离线</el-tag>
              <el-tag v-else-if="row[column.property] === '1'" type="success">在线</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFetch } from '@vueuse/core'
import { onMounted, provide, ref } from 'vue'
import { initGraph } from '@/utils/x6'
import type { Graph } from '@antv/x6'
import { useRoute } from 'vue-router'
import { useDeviceData } from '@/stores/useWebSocket'

const containerRef = ref<HTMLDivElement>()

const graph = ref<Graph>()

provide('getGraph', () => graph.value)


const route = useRoute()
const wsStore = useDeviceData()
wsStore.linkWs(route.query.userId as string)

onMounted(() => {
  graph.value = initGraph(containerRef.value!, containerRef.value?.getBoundingClientRect()!, {
    interacting: false
  })

  useFetch(import.meta.env.VITE_BASE_API + '/image/data.json', {
    afterFetch({ data }) {
      console.log(JSON.parse(data))
      graph.value?.fromJSON(JSON.parse(data))
    }
  })
})
</script>

<style scoped>

</style>
